/* ==================================== */
/* CSS for control sap.m/MultiComboBox  */
/* Base theme                           */
/* ==================================== */

.sapMMultiComboBox.sapMInputBase {
	&:not(.sapMInputBaseReadonly) {
		background-color: @sapUiFieldBackground;
	}

	& .sapMMultiComboBoxInputInner {
		background-color: transparent;
	}
}

.sapMMultiComboBoxFocus .sapMMultiComboBoxBorder::after {
	border: 1px dotted @sapUiContentFocusColor;
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	left: 2px;
	pointer-events: none;
}

.sapMMultiComboBox.sapMComboBoxTextFieldReadonly {
	background-color: @sapUiFieldReadOnlyBackground;
}

.sapMMultiComboBox.sapMMultiComboBoxFocus .sapMInputBaseInner:not(.sapMInputBaseReadonlyInner):focus {
	outline: none;
}

li.sapMMultiComboBoxItem .sapMCbBg {
	top: 0;
	bottom: 0;
	margin: auto;
}

/* Workaround for missing disabled state of sap.m.Tokenizer */
.sapMMultiComboBox.sapMComboBoxBaseDisabled {
	pointer-events: none;
}

/* ------------------------------ */
/* BorderDiv                      */
/* ------------------------------ */

/* on the desktop we hide the overflow */
html.sap-desktop .sapMMultiComboBoxBorder {
	overflow: hidden;
}

.sapMMultiComboBoxBorder {
	height: 100%;
	display: flex;

	&.sapMMultiComboBoxBorder .sapMTokenizer {
		flex: 0 1 auto;

		& .sapMToken:first-child {
			margin-left: 0.375rem;
		}
	}
}

.sapUiSizeCompact .sapMMultiComboBoxBorder .sapMTokenizer .sapMToken:first-child{
		margin-left: 0.25rem;
	}

.sapMMultiComboBoxHasToken .sapMInputBaseInner {
	padding-left: 0;
}

	/* ------------------------------ */
/*             InputDiv           */
/* ------------------------------ */

.sapMMultiComboBoxInputContainer {
	flex: 1;
	margin-right: 2.5rem;
	min-width: 3rem;
	// in Safari height of the inner input calculated wrong
	height: 100%;

	& .sapMMultiComboBoxInputInner {
		font-size: @sapMFontMediumSize;
		font-family: @sapUiFontFamily;
	}

	& .sapMMultiComboBoxInputInner:not(.sapMComboBoxTextFieldInnerReadonly) {
		padding-right: 0.75rem;
	}
}

.sapUiSizeCompact {
	.sapMMultiComboBoxInputContainer {
		margin-right: 2rem;
		min-width: 2rem;
	}

	& .sapMMultiComboBoxInputInner:not(.sapMComboBoxTextFieldInnerReadonly) {
		padding-right: 0.5rem;
	}
}

/* Keep placeholder invisible, when at least one token is chosen */

/* Webkit */
.sapMMultiComboBoxHasToken .sapMMultiComboBoxInputInner::-webkit-input-placeholder {
	color: transparent;
}

/* Firefox 19+ */
.sapMMultiComboBoxHasToken .sapMMultiComboBoxInputInner::-moz-placeholder {
	color: transparent;
}

/* IE */
.sapMMultiComboBoxHasToken .sapMMultiComboBoxInputInner:-ms-input-placeholder {
	color: transparent;
}

/* Keep placeholder invisible, when at least one token is chosen. IE solution */
.sapMMultiComboBoxHasToken > .sapMInputBasePlaceholder {
	color: transparent;
	max-width: 0;
}

/* If a non-native placeholder is used, make sure that it is in front of children elements. */
.sapMMultiComboBox > .sapMInputBasePlaceholder {
	z-index: 1;
}

/* If a non-native placeholder is used, make sure that arrow button is in front of placeholder. */
.sapMMultiComboBox .sapMComboBoxBaseArrow {
	z-index: 2;
}

/* ------------------------------ */
/* InputInner                     */
/* ------------------------------ */

.sapMMultiComboBoxItem .sapMCb {
	height: 2.5rem;
	line-height: 2.5rem;
}

li.sapMMultiComboBoxItem {
	height: 2.5rem;
}

.sapMMultiComboBoxPicker .sapMSLITitleOnly {
	font-size: 0.875rem;
}

html.sap-desktop li.sapMMultiComboBoxItemRangeSelection {
	background-color: @sapUiListHoverBackground;
}